<template>
	<div class="press-list">
		<div class="press-ul">
			<div class="press-li" @click="detailsTab(item)" v-for="(item,index) in viewModel.result" :key="index">
				<img class="press-ig" :src="$ala.urlImage(item.image)" />
				<div class="press-rig">
					<div class="press-rt1">{{item.title}}</div>
					<div class="press-rt2">{{item.intro}}</div>
				</div>
			</div>
		</div>
		<div class="press-pagination">
			<el-pagination layout="prev, pager, next" :total="viewModel.recordCount" :page-size="paraModel.pageSize" @current-change="currentChange"></el-pagination>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				paraModel: {
					type: 'TopLine',
					pageIndex: 1,
					pageSize: 15
				},
				viewModel: {}
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				var repones = await this.$ala.httpGet('api/auto/table', this.paraModel)
				this.viewModel = repones.result
			},
			currentChange(e) {
				this.paraModel.pageIndex = e
				document.body.scrollTop = document.documentElement.scrollTop = 500
				this.init()
			},
			detailsTab(data) {
				document.body.scrollTop = document.documentElement.scrollTop = 500
				this.$router.push(`/web/standard/press/details?id=${data.id}`)
			}
		}
	}
</script>
<style lang="scss">
	.press-list {
		padding: 12px;
		box-sizing: border-box;

		.press-li {
			display: flex;
			flex-direction: row;
			align-items: flex-end;
			cursor: pointer;

			.press-ig {
				width: 567px;
				height: 293px;
				display: block;
			}

			.press-rig {
				flex: 1;
				min-width: 0;
				padding-left: 20px;

				.press-rt1 {
					font-size: 20px;
					color: #373737;
					font-weight: bold;
				}

				.press-rt2 {
					font-size: 16px;
					color: #838383;
					line-height: 1.8;
					margin-top: 20px;
				}
			}
		}

		.press-li+.press-li {
			margin-top: 12px;
		}

		.press-pagination {
			text-align: center;
			margin-top: 20px;
		}
	}
</style>